<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">订单详情</block>
		</cu-custom>
		<view>
			<view class="solid-bottom bg-white">
				<view class="flex justify-between align-center padding-top padding-right-sm">
					<view class="cu-bar" style="min-height: 50rpx;">
						<view class="action">
							<text class="cuIcon-title text-blue"></text>
						</view>
						<view class="action">
							<view>{{form.id}}</view>
						</view>
					</view>
					<view>
						<view class='cu-tag radius ' :class="form.payStatus =='1' ? 'line-blue' :'line-red'">
							{{form.payStatus =='1' ? '已支付' :'未支付'}}
						</view>
						<view class='cu-tag radius line-blue'>{{form.statusDesc}}</view>
					</view>

				</view>
				<view class="flex p-xs mb-sm" v-for="(orderItem,orderItemIndex) in form.orderItemList"
					:key="orderItemIndex">
					<view class="flex-sub padding-lr-sm padding-top-sm"> <img :src="orderItem.picUrl" alt=""
							style="height:100px;width:100px;" />

					</view>
					<view class="flex-twice padding-top-sm padding-lr-xs">
						<view class="hx-overflow-2">{{orderItem.spuName}}</view>
						<view class="flex justify-between padding-top-xs">
							<view class="text-grey" v-if="orderItem.specsInfo">{{orderItem.specsInfo}}</view>
							<view>x{{orderItem.buyQuantity}}</view>
						</view>
						<view class="padding-top-xs flex justify-end">
							<view class="cu-tag" :class="orderItem.status == '1' ? 'bg-red' :''">
								{{orderItem.statusDesc}}
							</view>
						</view>

					</view>
				</view>
				<view class="padding-tb padding-lr-sm flex flex-direction align-end">
					<view>
						订单金额：<text class="text-price text-xl">{{form.totalPrice}}</text>
					</view>
					<view v-if="form.couponPrice>0">
						优惠金额：<text class="text-price text-xl">-{{form.couponPrice}}</text>
					</view>
					<view v-if="form.freightPrice>0">
						运费：+<text class="text-price text-xl">{{form.freightPrice}}</text>
					</view>
					<view v-if="form.paymentType">
						支付方式：<text
							class="text-xl">{{form.paymentType == '1' ? '微信支付' : form.paymentType == '2' ?'支付宝支付' :''}}</text>
					</view>
					<view>
						支付金额：<text class="text-red text-price text-xxl">{{form.payPrice}}</text><text
							class="text-grey text-sm">(含运费)</text>
					</view>
				</view>
			</view>

			<view class="cu-list menu-avatar margin-tb" v-if="form.userInfo">
				<view class="cu-bar bg-white">
					<view class="action">
						<text class="cuIcon-title text-blue"></text>
						<view>
							用户信息
						</view>
					</view>
				</view>
				<view class="cu-item">
					<view class="cu-avatar round lg" :style="'background-image:url(' + form.userInfo.avatarUrl + ')'">
					</view>
					<view class="content">
						<view class="text-black">{{form.userInfo.nickName}}</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								{{form.userInfo.phone}}
							</view>
						</view>

					</view>
				</view>
			</view>
			<view v-if="form.orderLogistics">
				<view class="cu-bar bg-white">
					<view class="action">
						<text class="cuIcon-title text-blue"></text>
						<view>
							收货信息
						</view>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar bg-white text-xxl text-blue">
							<text class="cuIcon-location"></text>
						</view>
						<view class="content">
							<view class="text-bold">{{form.orderLogistics.detailAddress}}</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
									{{form.orderLogistics.addresseeName}} {{form.orderLogistics.telephone}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white" v-if="form.orderLogistics.logisticsName">
					<view class="action">
						物流公司
					</view>
					<view class="action">
						<view class="text-black">{{form.orderLogistics.logisticsName}}</view>
					</view>
				</view>
				<view class="cu-bar bg-white" v-if="form.orderLogistics.logisticsNo">
					<view class="action">
						物流单号
					</view>
					<view class="action">
						<view class="text-black">{{form.orderLogistics.logisticsNo}}
							<text class="padding-left-xs text-blue"
								@tap="copy(form.orderLogistics.logisticsNo)">复制</text>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white" v-if="form.orderLogistics.stateDesc">
					<view class="action">
						物流状态
					</view>
					<view class="action">
						<view class='cu-tag bg-blue'>{{form.orderLogistics.stateDesc}}</view>
					</view>
				</view>
				<view class="padding-tb">
					<view class="cu-timeline solid-top padding">
						<view class="cu-time">
							物流信息
						</view>
						<view class="cu-item" v-for="(item,index) in form.orderLogistics.orderLogisticsDetailList"
							:key="index" :class="index == 0 ? 'text-orange' :'text-gray'"
							v-if="!expandFlag ? index <2 : index >-1">
							<view>
								<view>{{item.logisticsTime}}</view> {{item.logisticsContext}}
							</view>
						</view>
					</view>
					<view v-if="form.orderLogistics.orderLogisticsDetailList.length<=0"
						class="bg-white flex justify-center align-center text-orange">
						暂无物流信息
					</view>
					<view class="bg-white padding-xs flex justify-center align-center"
						v-if="form.orderLogistics.orderLogisticsDetailList.length>0 && !expandFlag">
						<button class="cu-btn round text-blue" @tap="expandFlag=true">查看完整物流信息<text
								class="cuIcon-unfold padding-left-xs"></text></button>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white tabbar border foot justify-center">
				<orderOperation :orderInfo="form" type="detail"></orderOperation>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getObj
	} from '@/api/mall/orderinfo.js'
	import orderOperation from '@/components/order-operation/index'
	export default {
		components: {
			orderOperation
		},
		data() {
			return {
				form: {},
				expandFlag: false // 展开标识 true 展开 false 关闭
			}
		},
		onLoad(props) {
			this.getDetail(props.id);
		},
		methods: {
			getDetail(id) {
				getObj(id).then(res => {
					this.form = res.data
				})
			}
		},
	}
</script>

<style>
</style>
